import { Tooltip } from 'antd';
import { PlayCircleOutlined, EyeOutlined, EditOutlined } from '@ant-design/icons';
import { getColorTextLoadMap, removeDateHmsStr, tooltipLength } from '@/utils';
import pageStyles from '@/common/pageLayout.less';
import { tableMoreBtnConfig } from '@/utils/myutilConfig';
import { ManageCommonAPI } from '@/pages/type';
import MyIcon from '@/components/MyIcon';

// 操作按钮
const Operation = (curRes: Record<string, any>, operateFuns: WarnManageAPI.IOperationClick, record: Record<string, any>) => {
  /** 更多按钮配置 */
  const otherBtnConfig: ManageCommonAPI.TableMoreBtnConfigApi[] = [
    {
      icon: <EyeOutlined />,
      btnName: '查看',
      clickFnc: operateFuns,
      clickType: 'onView',
      isVisible: curRes?.['/warnController/getMwarnByID'] && record?.id,
    },
  ];

  return tableMoreBtnConfig(otherBtnConfig, record);
};

const getTableColumns = (curRes: Record<string, any>, operateFuns: WarnManageAPI.IOperationClick) => {
  const { onView } = operateFuns;
  return [
    {
      title: '业务名称',
      dataIndex: 'orderTypeName',
      key: 'orderTypeName',
      width: 100,
      visible: true,
      fixed: 'left',
      unDrag: true,
      sorter: (a: any, b: any) => (a?.orderType > b?.orderType ? 1 : -1),
      render: (text: string | null) => {
        const { color, colorText } = getColorTextLoadMap(text);
        return (
          <span className={pageStyles['over-flow-hidden']} style={{ color }}>
            {colorText}
          </span>
        );
      },
    },
    {
      title: '预警内容',
      dataIndex: 'warnInfo',
      key: 'warnInfo',
      width: 280,
      visible: true,
      render: (text: string | null, record: Record<string, any>) => {
        return (
          <a
            onClick={() => {
              onView(record);
            }}
            style={{ color: '100%' }}
          >
            <Tooltip title={text ? tooltipLength(text, 100) : ''}>
              <span className={pageStyles['over-flow-hidden']}>{text ? text : '--'}</span>
            </Tooltip>
          </a>
        );
      },
    },
    // {
    //   title: '业务地址',
    //   dataIndex: 'orderUrl',
    //   key: 'orderUrl',
    //   width: 150,
    //   visible: false,
    //   render: (text: string | null) => {
    //     return (
    //       <Tooltip title={tooltipLength(text, 100)}>
    //         <span className={pageStyles['over-flow-hidden']}>{text ? text : '--'}</span>
    //       </Tooltip>
    //     );
    //   },
    // },
    {
      title: '是否已读',
      dataIndex: 'readFlag',
      key: 'readFlag',
      width: 100,
      visible: true,
      sorter: (a: any, b: any) => (a?.readFlag > b?.readFlag ? 1 : -1),
      render: (text: number | null) => {
        let color;
        let colorText;
        if (text == 1) {
          (color = '#59d6a5'), (colorText = '已读');
        } else if (text == 0) {
          (color = 'red'), (colorText = '未读');
        }
        return (
          <span className={pageStyles['over-flow-hidden']}>
            <MyIcon type="icon-dian" style={{ color }} />
            {colorText}
          </span>
        );
      },
    },
    {
      title: '阅读时间',
      dataIndex: 'readTime',
      key: 'readTime',
      visible: true,
      width: 100,
      sorter: (a: any, b: any) => (a.readTime > b.readTime ? 1 : -1),
      render: (text: string) => {
        const dateText: string = removeDateHmsStr(text);
        return <span className={pageStyles['over-flow-hidden']}>{dateText}</span>;
      },
    },
    {
      title: '联系电话',
      dataIndex: 'ownPhone',
      key: 'ownPhone',
      visible: false,
      width: 180,
      render: (text: string | null) => {
        return <span className={pageStyles['over-flow-hidden']}>{text ? text : '--'}</span>;
      },
    },
    {
      title: '申请时间',
      dataIndex: 'ownTime',
      key: 'ownTime',
      visible: false,
      width: 150,
      sorter: (a: any, b: any) => (a.ownTime > b.ownTime ? 1 : -1),
      render: (text: string) => {
        const dateText: string = removeDateHmsStr(text);
        return <span className={pageStyles['over-flow-hidden']}>{dateText}</span>;
      },
    },
    {
      title: '提醒人',
      dataIndex: 'ownerName',
      key: 'ownerName',
      visible: true,
      width: 150,
      sorter: (a: any, b: any) => (a.ownerID > b.ownerID ? 1 : -1),
      render: (text: string | null) => {
        return (
          <Tooltip title={tooltipLength(text, 100)}>
            <span className={pageStyles['over-flow-hidden']}>{text ? text : '--'}</span>
          </Tooltip>
        );
      },
    },
    {
      title: '提醒人岗位',
      dataIndex: 'ownPositionName',
      key: 'ownPositionName',
      visible: false,
      width: 150,
      sorter: (a: any, b: any) => (a.ownPositionID > b.ownPositionID ? 1 : -1),
      render: (text: string | null) => {
        return (
          <Tooltip title={tooltipLength(text, 100)}>
            <span className={pageStyles['over-flow-hidden']}>{text ? text : '--'}</span>
          </Tooltip>
        );
      },
    },
    {
      title: '提醒人部门',
      dataIndex: 'ownDepartmentName',
      key: 'ownDepartmentName',
      visible: false,
      width: 150,
      sorter: (a: any, b: any) => (a.ownDepartmentID > b.ownDepartmentID ? 1 : -1),
      render: (text: string | null) => {
        return (
          <Tooltip title={tooltipLength(text, 100)}>
            <span className={pageStyles['over-flow-hidden']}>{text ? text : '--'}</span>
          </Tooltip>
        );
      },
    },
    {
      title: '提醒人公司',
      dataIndex: 'ownCompanyName',
      key: 'ownCompanyName',
      visible: false,
      width: 150,
      sorter: (a: any, b: any) => (a.ownCompanyID > b.ownCompanyID ? 1 : -1),
      render: (text: string | null) => {
        return (
          <Tooltip title={tooltipLength(text, 100)}>
            <span className={pageStyles['over-flow-hidden']}>{text ? text : '--'}</span>
          </Tooltip>
        );
      },
    },
    {
      title: '备注',
      dataIndex: 'remark',
      key: 'remark',
      visible: false,
      width: 150,
      render: (text: string | null) => {
        return (
          <Tooltip title={text}>
            <span className={pageStyles['over-flow-hidden']}>{text ? text : '--'}</span>
          </Tooltip>
        );
      },
    },
    // {
    //   title: '操作',
    //   dataIndex: 'operation',
    //   key: 'operation',
    //   width: 220,
    //   visible: true,
    //   unDrag: true,
    //   fixed: 'right',
    //   render: (text: any, record: any) => {
    //     return (
    //       <div
    //         style={{
    //           display: 'flex',
    //         }}
    //       >
    //         {Operation(curRes, operateFuns, record)}
    //       </div>
    //     );
    //   },
    // },
  ];
};

export { getTableColumns };
